import React, { useState, useEffect } from "react";
import Taro, { useDidShow } from '@tarojs/taro'
import InterTime from "@/components/InterTime";
import Tabs from '@/components/Tabs'
import { getCurrentInstance, useReachBottom } from '@tarojs/taro'
import { Button, View } from '@tarojs/components'
import { fetchUserOrder } from '@/server/order';
import { backgroundObj, loginData } from '@/utils/utils'
import Router from '@/utils/router';
import "./index.scss";

export default (props) => {
    const { params } = getCurrentInstance().router
    const { status = '' } = params

    const [data, setData] = useState([])
    const [page, setPage] = useState({
        page: 1,
        limit: 10
    })
    const [userInfo, setUserInfo] = useState({})
    const { organizationId = '', token } = userInfo
    useDidShow(() => {
        setUserInfo(Taro.getStorageSync('userInfo'))
    })
    useEffect(() => {
        if (token) {
            fetchData()
        }

    }, [page])
    useReachBottom(() => {
        setPage({
            ...page,
            page: page.page + 1
        })
    })
    const [activeKey, setActiveKey] = useState(status)
    const [tabs, setTabs] = useState([{
        label: '全部',
        value: ''
    }, {
        label: '待付款',
        value: '0'
    }, {
        label: '已付款',
        value: '1'
    }, {
        label: '已关闭',
        value: '2'
    }, {
        label: '已完成',
        value: '3'
    }])
    const OrderCard = (props) => {
        const { data } = props
        const { beanFee,
            createTime,
            orderDesc,
            orderSn,
            payFee = 0,
            totalFee,
            refusedFlag,
            goodsAmount,
            payMode,
            status } = data
        let desc = JSON.parse(orderDesc) || [];
        const renderRightTitle = {
            0: <View className="orderList_list_status1">待付款</View>,
            1: <View className="orderList_list_status2">已支付</View>,
            2: (
                <View className="orderList_list_status2">
                    {refusedFlag === "1" ? "已退款" : "交易关闭"}
                </View>
            ),
            3: (
                <View className="orderList_list_status2">
                    已完成
                </View>
            ),
        }[status];
        const { goodsName, goodsCover } = desc
        const renderBottom = {
            0: (
                <>
                    <View className="orderList_data_btn">
                        <View className="orderList_pay_box">
                            <View className="orderList_pay_label">需付款:</View>
                            <View className="orderList_pay_icon">¥</View>
                            <View className="orderList_pay_price">{payFee}</View>
                        </View>
                    </View>
                    <View className="orderList_pay_btnBox">
                        <View className="orderList_pay_btntime">
                            剩余
                            <InterTime
                                fn={() => updateStatus(item)}
                                times={createTime}
                            ></InterTime>
                            自动关闭
                        </View>
                        <View className="orderList_pay_btnSubmit">付款</View>
                    </View>
                </>
            ),
            1: (
                <View className="orderList_data_btn">
                    <View className="orderList_pay_box">
                        <View className="orderList_pay_label">实付:</View>
                        <View className="orderList_pay_icon">¥</View>
                        <View className="orderList_pay_price">{payFee}</View>
                    </View>
                </View>
            ),
            2: (
                <View className="orderList_pay_tk">
                    {refusedFlag === "1" ? (
                        <View className="orderList_pay_btntime">已退款</View>
                    ) : (
                        <View className=""></View>
                    )}
                    <View className="orderList_data_btn" style={{ border: "none" }}>
                        <View className="orderList_pay_box">
                            <View className="orderList_pay_label">实付:</View>
                            <View className="orderList_pay_icon">¥</View>
                            <View className="orderList_pay_price">
                                {refusedFlag === "1" ? payFee : "0"}
                            </View>
                        </View>
                    </View>
                </View>
            ),
            3: (
                <View className="orderList_data_btn">
                    <View className="orderList_pay_box">
                        <View className="orderList_pay_label">实付:</View>
                        <View className="orderList_pay_icon">¥</View>
                        <View className="orderList_pay_price">{payMode === 'free' ? '0' : payFee}</View>
                    </View>
                </View>
            )
        }[status];
        return (
            <View
                className="orderList_data_list"
                onClick={(e) => {
                    e.stopPropagation();
                    Router('orderDetail', { args: { orderSn } })
                }}
            >
                <View className="orderList_list_title">
                    <View className="orderList_list_time">{createTime}</View>
                    {renderRightTitle}
                </View>
                <View className="orderList_data_content">
                    <View className="orderList_data_body">
                        <View style={backgroundObj(goodsCover)} className="orderList_listData_profile">

                        </View>
                        <View className="orderList_listData_body">
                            <View className="orderList_listData_title">
                                {goodsName}
                            </View>
                            <View className="orderList_listData_priceOrCount">
                                <View className="orderList_list_price">
                                    ¥{payFee}
                                </View>
                                <View className="orderList_list_count">x {goodsAmount}</View>
                            </View>
                        </View>
                    </View>
                </View>
                {renderBottom}
            </View>
        );
    }
    const updateStatus = (item) => {
        setList(list.map(data => {
            if (item.orderSn === data.orderSn) {
                return {
                    ...data, status: '2'
                }
            } else {
                return data
            }
        }))
    }
    const fetchData = () => {
        fetchUserOrder({ organizationId, ...page, status: activeKey }).then(val => {
            const { orderList } = val
            setData([...data, ...orderList])
        })
    }
    return (
        <View className="orderList_box">
            <Tabs list={tabs} onChange={(e) => {
                setActiveKey(() => {
                    setPage(() => {
                        setData([])
                        return {
                            ...page,
                            page: 1
                        }
                    })
                    return e
                })
            }} activeKey={activeKey}>
            </Tabs>
            <View className="orderList_data">
                {!token && <Button style={{ margin: '20px auto' }} onClick={() => {
                    Taro.setStorageSync('organizationId', '1')
                    Taro.setStorageSync('userInfo', ({
                        organizationId: '1'
                    }))
                    Router('login')
                }}>
                    登录后查看
                </Button>}
                {data.map((item, index) => {
                    return <OrderCard key={index} data={item}></OrderCard>
                })}
            </View>
        </View>
    );
};

